<!DOCTYPE html>
<html>
    <head lang="zh-cn">
        <link href = "pz.css" rel = "stylesheet" type = "text/css"/> 
        <script type="text/javascript" src="js/meihua.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <meta charset="utf-8">
        <link rel="Shortcut Icon" href="img/logo.jpg">
        <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <title>云文档————登陆</title>
        </head>
		<style type="text/css">
		@media  only screen and (max-width:1024px){
		body{
		    background:url("https://api.oick.cn/random/api.php?type=pe") no-repeat;
		    background-color:transparent;
		    width: auto;
		    height: auto;
		    background-size:cover;
		    background-attachment: fixed;
			text-align: center;
		}
			.dlbj{
			    border-radius: 25px;
			    width: 80%;
			    height:400px;
			    margin: auto;
			    margin-top: 20vh;
			    text-align: center;
			    font-size: 50px;
			    background-color: #CCCCFF;
			    opacity: 0.5;
			    transition: 0.5s;
			    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
			}
			.dlbk{
			    width: 90%;
			    height: auto;
			    margin: auto;
			    font-size: 20px;
			    border-radius: 20px;
			    padding: 10px;
				overflow: hidden;
				border: none;
			}
			.dlmm{
			    width: 90%;
			    height: auto;
			    margin: auto;
			    font-size: 20px;
			    border-radius: 20px;
			    padding: 10px;
				overflow:hidden;
				border: none;
			}
			.an{
			    background-color: #00BFFF;
			    width: 70%;
			    height: 50px;
			    opacity: 0.7;
			    border-radius: 20px;
			    background-image: linear-gradient(to right,#009FFF,#ec2F4B);
			}
			.dlbj:hover{
			        border-radius: 25px;
			        width: 80%;
			        height: 400px;
			        margin: auto;
			        margin-top: 10vh;
			        text-align: center;
			        font-size: 50px;
			        background-color: #CCCCFF;
			        opacity: 0.8;
			        transition: 0.5s;
			        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
			}
			.dlts{
			    width: auto;
			    height: auto;
			    font-size: 30px;
			    color: #009FFF;
			    overflow: auto;
			}
			}
			@media only screen and (min-width:1024px) {
				body{
					background:url("https://www.dmoe.cc/random.php") no-repeat;
					background-color:transparent;
					width: auto;
					height: auto;
					background-size:cover;
					background-attachment: fixed;
					text-align: center;
					margin-top:10vh;
				}
				.dlbj{
					width: 40%;
					background: #FF6666;
					border-radius: 0px 15px 15px 0px;
					margin: auto;
					height: 520px;
					font-size: 60px;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
					margin-left: 50%;
					margin-top: 3%;
					border-top:3px solid red;
					border-right:3px solid red;
					border-bottom:3px solid red;
					opacity: 1;
				}
				.dlbj:hover{
					width: 40%;
					background: #009FFF;
					border-radius: 0px 15px 15px 0px;
					margin: auto;
					height: 520px;
					font-size: 60px;
					transition: 1s;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
					margin-left: 50%;
					margin-top: 3%;
					border-left-style: 3px solid red;
					border-top-style: 3px solid red;
					border-bottom-style: 3px solid red;
					opacity: 1;
				}
				.dlbk{
					width: 90%;
					height: 50px;
					margin:auto;
					border-radius: 15px;
					margin-bottom: 1%;
					border: none;
				}
				.dlmm{
					width: 90%;
					height: 50px;
					margin: auto;
					border-radius: 15px;
					margin-top: 2%;
					margin-bottom: 2%;
					border: none;
					margin-bottom: 5%;
				}
				.an{
					width: 80%;
					margin-top: 3%;
					border-radius: 15px;
					height: 66px;
					background: #99CCFF;
					border: none;
				}
				.dlts{
					font-size: 50px;
				}
				.tu{
					width: 44.9%;
					height: 520px;
					background: black;
					float: left;
					border-radius: 15px 0px 0px 15px;
					margin: auto;
					margin-left: 5%;
					background: url("https://www.dmoe.cc/random.php") no-repeat;
					border:none;
					background-size: 100% 100%;
					border-top: 3px solid #009FFF;
					border-left: 3px solid #009FFF;
					border-bottom: 3px solid #009FFF;
				}
				.tu:hover{
					width: 44.9%;
					height: 520px;
					background: black;
					float: left;
					border-radius: 15px 0px 0px 15px;
					margin: auto;
					margin-left: 5%;
					background: url("https://www.dmoe.cc/random.php") no-repeat;
					border:none;
					background-size: 100% 100%;
					border-top: 3px solid #009FFF;
					border-left: 3px solid #009FFF;
					border-bottom: 3px solid #009FFF;
				}
			}
		</style>
        <body onload="getzhmm()">
			<div class="tu"></div>
            <div class="dlbj">LOGIN
                <form action="" method="post">
                    <div class="dlbk">
                    <input type="text" name="user" required="required" placeholder="请输入您的账号" class="dlbk" id="user">
                    </div>
                    <div class="dlmm">
                    <input type="password" name="user" required="required" placeholder="请输入您的密码" class="dlmm" id="pass">
                    </div>
                    <button  type="button" class="an" onclick="login()" style="font-size: 35px;">登录</button>
                    <button  type="button" class="an" onclick="window.location.href='reg.php'" style="font-size: 35px;">注册</button>
                    <div class="dlts">欢迎━(*｀∀´*)ノ亻!</div>
                </form>
            </div>
        </body>
        <script>
                   function login(){
                    var userword=document.getElementById("user").value;
                    var pass=document.getElementById("pass").value;
					if(user=='' || pass==''){
						alert("参数不完整");
					}else{
                    $.post("denglu.php",{
                        user:userword,
                        pass:pass
                    },
                    function (data){
                        if(data.msg=="登录成功"){
                        alert(data.msg);
                        $.cookie('user',userword,{expires:7});
                        $.cookie('pass',pass,{expires:7});
                        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                        //alert(navigator.userAgent);  
                        window.location.href ="zjm1.php";
                        } else if (/(Android)/i.test(navigator.userAgent)) {
                        //alert(navigator.userAgent); 
                        window.location.href ="zjm1.php";
                        } else {
                        window.location.href ="zjm.php";
                        };
                        }else{
							alert(data.msg+":"+data.result);
						}
                    },"json");
                    }
				}
                    function getzhmm(){
                        var zh=$.cookie('user');
                        var mm=$.cookie('pass');
                        $.post("denglu.php",{
                        user:zh,
                        pass:mm
                    },
                    function (data){
                        if(data.msg=="登录成功"){
                        alert(data.msg);
                        //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
                        var info = navigator.userAgent;
                        //通过正则表达式的test方法判断是否包含“Mobile”字符串
                        var isPhone = /mobile/i.test(info);
                        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                        //alert(navigator.userAgent);  
                        window.location.href ="zjm1.php";
                        } else if (/(Android)/i.test(navigator.userAgent)) {
                        //alert(navigator.userAgent); 
                        window.location.href ="zjm1.php";
                        } else {
                        window.location.href ="zjm.php";
                        };
                        }
                    },"json");
                    }
        </script>